<template>
  <div>
    <Card>
      <p slot="title">个人成获奖名单</p>
      <Table :columns="columns" :data="personalData"></Table>
    </Card>
    <Card>
      <p slot="title">集体成获奖名单</p>
      <Table :columns="columns" :data="collectiveData"></Table>
    </Card>
  </div>
</template>
<script>
  export default {
    props: ['change'],
    data () {
      return {
        columns: [
          {
            title: '排名',
            type: 'index',
            width: 100,
            align: 'center'
          },
          {
            title: '姓名',
            key: 'u_name'
          },
          {
            title: '性别',
            key: 'u_sex',
            render: (h, params) => {
              return h("span", params.row.u_sex == '1' ? '男' : '女'); //包装到span标签里返回
            }
          },
          {
            title: '项目名称',
            key: 'i_name'
          },
          {
            title: '比赛时间',
            key: 'time',
            align: "center",
            render: (h, params) => {
              let newType = params.row.time; //获取数据库的时间戳
              let date = new Date(parseInt(newType))
              let fmt = 'YYYY-mm-dd  HH:MM'
              let ret
              const opt = {
                'Y+': date.getFullYear().toString(), // 年
                'm+': (date.getMonth() + 1).toString(), // 月
                'd+': date.getDate().toString(), // 日
                'H+': date.getHours().toString(), // 时
                'M+': date.getMinutes().toString(), // 分
                'S+': date.getSeconds().toString() // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
              }
              for (let k in opt) {
                ret = new RegExp('(' + k + ')').exec(fmt)
                if (ret) {
                  fmt = fmt.replace(
                    ret[1],
                    ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
                  )
                }
              }
              return h("span", fmt); //包装到span标签里返回
            }
          },
          {
            title: '成绩',
            key: 'results',

          }
        ],
        personalData: [],
        collectiveData: []
      }
    },
    watch: {
      change (val) {
        this.getData()
      }
    },
    //组件挂在的时候获取数据
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        this.$axios.get('/user/getAllRanking?type=1&count=10')
          .then(res => {
            if (res.data.code == 200) {
              this.personalData = res.data.data
            }
          })
          .catch(err => {
            console.error(err);
          })
        this.$axios.get('/user/getAllRanking?type=0&count=10')
          .then(res => {
            if (res.data.code == 200) {
              this.collectiveData = res.data.data
            }
          })
          .catch(err => {
            console.error(err);
          })
      }
    },
  }
</script>
